<template>
    <HeaderComponent /> <!-- 顶部导航栏 -->
    <div id="BackLink">
      <router-link to="/main">Return to Main Menu</router-link>
      </div>
  
    <div id="catalog">
      <h2>My Coupons</h2>
  
      <table>
        <thead>
          <tr>
            <th>Coupon ID</th>
            <th>Limit</th>
            <th>Deduction</th>
            <th>Discount</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="coupon in couponList" :key="coupon.ID">
            <td>{{ coupon.id }}</td>
            <td>{{ coupon.limit }}</td>
            <td>{{ coupon.deduction }}</td>
            <td>{{ coupon.discount }}</td>
          </tr>
  
          <tr v-if="couponList.length === 0">
            <td colspan="4">No coupons.</td>
          </tr>
        </tbody>
      </table>
    </div>
  
    <FooterComponent /> <!-- 底部信息 -->
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  //import axios from 'axios';
  import{ fetchCoupons } from '@/api/coupon.js';
  import { useRoute } from 'vue-router';
  import HeaderComponent from '@/components/Header.vue';
  import FooterComponent from '@/components/Footer.vue';
  import "@/assets/css/global.css"; // 引入全局 CSS
  
  // 定义响应式变量代替 data()
  const couponList = ref([]);
  
  // 组件创建时发起请求
  onMounted(async () => {
    try {
      const response = await fetchCoupons();
      couponList.value = response.data;
    } catch (error) {
      console.error('Failed to load coupons:', error);
    }
  });
  </script>
  
  <style scoped>
 
  </style>